<template>
  <view class="page">
    <CCNavbar
      :fixed="fixed"
      :placeholder="placeholder"
      :safeAreaInsetTop="safeArea"
      :border="border"
      :autoBack="true"
      :bgColor="bgColor"
      :title="title"
      :leftIcon="leftIcon"
      :height="height"
      :titleWidth="titleWidth"
      :adaptCapsule="adaptCapsule"
      :usePageScroll="false"
      :blurForce="scrolled"
      :titleSize="titleSize"
      :titleColor="titleColor"
    />

    <view class="content">
      <view class="panel">
        <text class="panel-title">交互调试</text>
        <view class="row">
          <text class="label">标题</text>
          <input class="input" type="text" v-model="title" placeholder="请输入标题" />
        </view>
        <view class="row">
          <text class="label">显示返回箭头</text>
          <switch :checked="leftIconVisible" @change="onToggleLeftIcon" />
        </view>
        <view class="row">
          <text class="label">固定吸顶 fixed</text>
          <switch :checked="fixed" @change="e => fixed = e.detail.value" />
        </view>
        <view class="row">
          <text class="label">占位 placeholder</text>
          <switch :checked="placeholder" @change="e => placeholder = e.detail.value" />
        </view>
        <view class="row">
          <text class="label">状态栏安全区</text>
          <switch :checked="safeArea" @change="e => safeArea = e.detail.value" />
        </view>
        <view class="row">
          <text class="label">底部分割线 border</text>
          <switch :checked="border" @change="e => border = e.detail.value" />
        </view>
        <view class="row">
          <text class="label">避让胶囊 adaptCapsule</text>
          <switch :checked="adaptCapsule" @change="e => adaptCapsule = e.detail.value" />
        </view>
        <view class="row">
          <text class="label">内容高度 height(px)</text>
          <slider :value="height" min="36" max="64" step="1" show-value @change="e => height = e.detail.value" />
        </view>
        <view class="row">
          <text class="label">标题最大宽度 titleWidth</text>
          <input class="input" type="text" v-model="titleWidth" placeholder="如 400rpx 或 200" />
        </view>
        <view class="row">
          <text class="label">标题字号 titleSize(px)</text>
          <slider :value="titleSize" min="12" max="24" step="1" show-value @change="e => titleSize = e.detail.value" />
        </view>
        <view class="row">
          <text class="label">标题颜色 titleColor</text>
          <input class="input" type="text" v-model="titleColor" placeholder="#303133 或 rgb(48,49,51)" />
        </view>
        <view class="row">
          <text class="label">背景色 bgColor</text>
          <input class="input" type="text" v-model="bgColor" placeholder="transparent 或 rgba(255,255,255,.6)" />
        </view>
        <view class="tips">
          <text>提示：向下滚动时，固定状态下 Navbar 将出现毛玻璃/半透明效果；H5/App 支持真实毛玻璃（backdrop-filter），微信小程序将自动降级为半透明 + 阴影。</text>
        </view>
      </view>

      <view class="panel">
        <text class="panel-title">滚动区（观察模糊效果）</text>
        <view class="scroll-box">
          <view v-for="i in 30" :key="i" class="scroll-item">示例内容 {{ i }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import CCNavbar from '@/components/CCNavbar.vue'
export default {
  components: { CCNavbar },
  data() {
    return {
      // Navbar props
      title: 'Navbar 功能展示',
      leftIcon: 'arrow-left',
      leftIconVisible: true,
      fixed: true,
      placeholder: true,
      safeArea: true,
      border: false,
      adaptCapsule: true,
      bgColor: 'transparent',
      height: 44,
      titleWidth: '400rpx',
      titleSize: 16,
      titleColor: '#303133',
      // 页面滚动态（用于受控毛玻璃）
      scrolled: false,
    }
  },
  // 页面生命周期：用于小程序/通用平台下控制毛玻璃开关
  onPageScroll(e) {
    this.scrolled = e.scrollTop > 0
  },
  methods: {
    onToggleLeftIcon(e) {
      this.leftIconVisible = e.detail.value
      this.leftIcon = this.leftIconVisible ? 'arrow-left' : ''
    },
  },
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(180deg, #98ff7e 0%, #ECECEC 30% ,#ffffff 100%);
}
.content {
  padding: 12px;
}
.panel {
  background: #ffffff;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  margin-bottom: 12px;
}
.panel-title {
  font-size: 16px;
  color: #333;
  font-weight: 600;
}
.row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.label {
  font-size: 14px;
  color: #555;
  margin-right: 10px;
}
.input {
  flex: 1;
  background: #f6f6f6;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
}
.tips {
  margin-top: 8px;
  color: #888;
  font-size: 12px;
}
.scroll-box {
  margin-top: 12px;
}
.scroll-item {
  background: #f6f6f6;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 8px;
  color: #444;
}
</style>